<template>
  <div>
    <el-row :gutter="20">
      <el-col>
        <!--工具栏-->
        <div class="head-container uifix-search-dialog">
          <!-- 搜索 -->
          <el-input
            v-model="query.blurry"
            clearable
            prefix-icon="el-icon-search"
            size="small"
            placeholder="输入分站点、工程号、主合同号、项目编号和项目名称搜索"
            style="width: 384px;"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          />
          <rrOperation />
          <el-button
            v-if="crud.optShow.download"
            :loading="crud.downloadLoading"
            :disabled="!crud.data.length"
            class="filter-item"
            size="small"
            icon="el-icon-upload2"
            type="primary"
            @click="handleExport"
          >导出</el-button>
        </div>
        <!--表格渲染-->
        <el-table v-loading="crud.loading" stripe max-height="800px" :data="crud.data" style="width: 100%;margin-bottom: 30px;">
          <el-table-column align="center" type="expand">
            <template slot-scope="props">
              <el-table
                class="related-table"
                :data-nested="true"
                :data="props.row.children"
                style="width: 90%;margin:0 auto;"
                row-key="id"
              >
                <el-table-column :show-overflow-tooltip="true" prop="subNo" label="子项号" />
                <el-table-column :show-overflow-tooltip="true" prop="subName" label="子项名" />
                <el-table-column :show-overflow-tooltip="true" prop="disciplineName" label="项目内专业" sortable />
                <el-table-column :show-overflow-tooltip="true" prop="subRoleName" label="项目角色" sortable />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="siteName" label="分站点" />
          <el-table-column :show-overflow-tooltip="true" prop="constructionCode" label="工程号" sortable />
          <el-table-column :show-overflow-tooltip="true" prop="contractCode" label="主合同号" sortable />
          <el-table-column :show-overflow-tooltip="true" prop="projectCode" label="项目编号" sortable />
          <el-table-column :show-overflow-tooltip="true" prop="projectName" label="项目名称" sortable />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button slot="left" size="mini" type="text" @click="projectDetail(scope.row)"><svg-icon icon-class="detail" /> 项目详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crudprojectMember from '@/api/project/projectMember'
import { download } from '@/api/data'
import { downloadFile } from '@/utils'
import { getProjectDetail } from '@/api/project/project'
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'

export default {
  name: 'RelatedProjects',
  components: { rrOperation },
  cruds() {
    return CRUD({
      title: '相关项目',
      url: 'api/projectMember/queryProjMemberForUser',
      query: { appModel: 'system', size: 10000 },
      crudMethod: { ...crudprojectMember }
    })
  },
  mixins: [presenter(), header(), crud()],
  props: {
    childParams: {
      type: Object,
      default: function() {
        return {
          title: '相关项目',
          userId: null,
          username: null,
          nickName: null
        }
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.userId = this.childParams.userId
      return true
    },
    /** 导出按钮操作 */
    handleExport() {
      this.crud.downloadLoading = true
      download('api/projectMember/download', this.crud.getQueryParams()).then(result => {
        downloadFile(result, this.childParams.nickName + '_' + this.childParams.username + '_' + this.crud.title + '数据', 'xlsx')
        this.crud.downloadLoading = false
      }).catch(() => {
        this.crud.downloadLoading = false
      })
    },
    // 项目详情
    projectDetail(row) {
      const params = {
        page: 0,
        size: 20,
        appModel: 'system',
        projCode: row.projectCode
      }
      getProjectDetail(params).then(res => {
        this.$router.push({
          path: '/project/home'
        })
        this.$emit('update:relatedProjectShow', false)
        this.$store.commit('app/SET_CURRENT_PROJECT', res.content[0])
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .related-table ::v-deep .el-table__body-wrapper{
    min-height: 0px !important;
  }
</style>
<style lang="scss">
  .abow_dialog[view-relatedProjects] {
    .el-dialog {
      width: 900px;
      line-height: 24px;
      font-style: revert;
      padding: 0;
      .el-dialog__title{
        font-size: 18px;
        color: var(--brother-common-tips-text-color);
      }
      .el-dialog__body{
        padding: 20px 10px 0 20px;
      }
    }
  }
</style>
